<template>
  <div class="detial">
    <div class="warpper">
      <div class="detial-text">
        <i class="iconfont icon-xia" @click="fun()"></i>
        <p>{{ songInfo.songtitle }}</p>
        <i class="iconfont icon-fenxiang_o"></i>
      </div>
    </div>
    <div class="circl-box">
      <div class="circl">
        <img :src="songInfo.songimg" alt="" />
      </div>
    </div>
    <div class="content">
      <i class="iconfont icon-heart-fill" :class="{red: !isshow,blue: isshow}" @click="isshow=!isshow"></i>
      <i class="iconfont icon-xiazai"></i>
      <i class="iconfont icon-cailing"></i>
      <i class="iconfont icon-008duihuakuang-4"></i>
      <i class="iconfont icon-gengduo-shuxiang"></i>
    </div>
    <div class="vadio">
      <i class="iconfont icon-shunshizhenfangxiangclockwise5"></i>
      <i class="iconfont icon-zuobofang" @click="prev(index)"></i>
      <i class="iconfont" :class="state == 'stop' ? 'icon-zanting' : 'icon-65zanting'" @click="stopAndPlay()"></i>
      <i class="iconfont icon-youbofang" @click="next()"></i>
      <i class="iconfont icon-zhankaicaidan"></i>
    </div>
    <div class="xian">
      xx
      <div></div>
      xx
    </div>
    <audio :src="songInfo.songurl" autoplay="autoplay" id="audio"></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songInfo: Object,
      index: Number,
      songList: Array,
      state: String,
      isshow: true
    };
  },
  methods: {
    fun() {
      this.$router.push("/Fa");
    },
    stopAndPlay() {
      let oAudio = document.querySelector("#audio");
      if (this.state == "play") {
        oAudio.pause();
        this.state = "stop";
      } else {
        oAudio.play();
        this.state = "play";
      }
    },
    prev() {
      this.index--;
      if (this.index < 0) {
        this.index = this.songList.length - 1;
      }
      this.songInfo = this.songList[this.index];
    },
    next() {
      this.index++;
      if (this.index >= this.songList.length) {
        this.index = 0;
      }
      this.songInfo = this.songList[this.index];
    },
  },
  created() {
    this.index = this.$route.query.index;
    this.songList = this.$route.query.songList;
    this.songInfo = this.songList[this.index];
    console.log(this.songInfo);
    console.log(this.songList);
  },
};
</script>

<style  scoped>
.detial {
  width: 100%;
  height: 1.34rem;
  background-color: #262626;
}
.warpper {
  margin: 0 auto;
  width: 6.86rem;
  height: 100%;
}
.detial-text {
  display: flex;
  justify-content: space-between;
  line-height: 1.35rem;
}
.detial-text > i {
  color: white;
  font-size: 0.5rem;
}
.detial-text > p {
  color: white;
  font-size: 0.3rem;
}
.circl-box {
  width: 100%;
  height: 12.35rem;
  background: linear-gradient(
    to bottom,
    #2d2d2d 20%,
    #393939 40%,
    #434544 50%,
    #434049 70%,
    #3e3f53 80%,
    #2d3653 90%
  );
  overflow: hidden;
}
.circl {
  width: 5.51rem;
  height: 5.51rem;
  background-color: black;
  border-radius: 50%;
  margin: 2rem auto;
  display: flex;
  justify-content: center;
}
img {
  width: 3.73rem;
  height: 3.73rem;
  border-radius: 50%;
  align-self: center;
}
.content {
  display: flex;
  justify-content: space-between;
  justify-content: space-around;
  position: relative;
  bottom: 3rem;
}
i {
  color: white;
  font-size: 0.4rem;
  font-weight: 100;
}
.vadio {
  position: relative;
  bottom: 1.8rem;
  color: red;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.vadio > i {
  font-size: 0.4rem;
}
.xian {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  bottom: 3.2rem;
  color: #9ea5b5;
  font-size: 0.2rem;
}
.xian > div {
  height: 0.01rem;
  width: 3.8rem;
  border-top: 1px solid #9ea5b5;
}
.vadio > i:nth-of-type(3) {
  font-size: 0.7rem;
}
.red {
  color:  red;
}
</style>